<h3>Embedded text</h3>
<lv-datatable [lvData]="data" #lvTable1>
  <thead>
    <tr>
      <th style="width: 40px" [class.lv-table-column-has-folder]="true"></th>
      <th>Id</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable1.renderData; let even = even; let odd = odd">
      <tr>
        <td lvShowUnfold [(lvUnfold)]="item.expand"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
      <tr *ngIf="item.expand" lvInnerUnfold @showPanel>
        <td colspan="4" lvInnerUnfold>
          <div class="inner-content">
            <lv-form [lvLabelColon]="false">
              <lv-form-column lvWidth="33.333%">
                <lv-form-item>
                  <lv-form-label>id</lv-form-label>
                  <lv-form-control>{{ item.id }}</lv-form-control>
                </lv-form-item>
              </lv-form-column>
              <lv-form-column lvWidth="33.333%">
                <lv-form-item>
                  <lv-form-label>name</lv-form-label>
                  <lv-form-control>{{ item.name }}</lv-form-control>
                </lv-form-item>
              </lv-form-column>
              <lv-form-column lvWidth="33.333%">
                <lv-form-item>
                  <lv-form-label>age</lv-form-label>
                  <lv-form-control>{{ item.age }}</lv-form-control>
                </lv-form-item>
              </lv-form-column>
            </lv-form>
          </div>
        </td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<h3>Embedded table</h3>
<lv-datatable [lvData]="subData" #lvTable2>
  <thead>
    <tr>
      <th style="width: 40px" [class.lv-table-column-has-folder]="true"></th>
      <th>Id</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable2.renderData; let even = even; let odd = odd">
      <tr>
        <td lvShowUnfold [(lvUnfold)]="item.expand"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>

      <tr *ngIf="item.expand" lvInnerUnfold @showPanelTable>
        <td colspan="4" lvInnerUnfold>
          <ng-container *ngTemplateOutlet="subTableTpl"></ng-container>
        </td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<ng-template #subTableTpl>
  <lv-datatable [lvData]="subData" [lvPaginator]="page" #subTable lvSize="small">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of subTable.renderData; let even = even; let odd = odd">
        <tr>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>
  <lv-paginator #page></lv-paginator>
</ng-template>
